import './css/index.less';

export class Home extends React.Component {
    constructor(props) {
        super(props);
        const menu = (
            <Antd.Menu onClick={this.handleMenuClick.bind(this)}>
                <Antd.Menu.Item key="1">已审核房型订单</Antd.Menu.Item>
                <Antd.Menu.Item key="2">未审核房型订单</Antd.Menu.Item>
            </Antd.Menu>
        );
        this.state = {
            menu,
            status: '审核状态',
        };
    };

    handleMenuClick(e) {
        console.log(e.item.props.children);
        Antd.message.info('您选择了' + e.item.props.children);
        this.setState({
            status: e.item.props.children,
        });
    }

    onShowSizeChange(current, pageSize) {
        console.log(current, pageSize);
    }

    componentDidMount() {

    }

    componentWillUnmount() {

    }

    render() {
        return (
            <div>
                <Antd.Row type="flex" justify="center">
                    <Antd.Col xl={24} className="home-wrapper">
                        <Antd.Row>
                            <Antd.Col span={24} className="home-content">
                                <Antd.Row>
                                    <Antd.Col span={24}>
                                        <span>酒店查询</span>
                                    </Antd.Col>
                                </Antd.Row>
                                <Antd.Row className="home-menu my-pb">
                                    <Antd.Col span={24}>
                                        <Antd.Dropdown overlay={this.state.menu} className="my-mr">
                                            <Antd.Button>
                                                {this.state.status === '审核状态' ? '审核状态' : this.state.status} <Antd.Icon
                                                type="down"/>
                                            </Antd.Button>
                                        </Antd.Dropdown>
                                        <Antd.Dropdown overlay={this.state.menu} className="my-mr">
                                            <Antd.Button>
                                                {this.state.status === '审核状态' ? '审核状态' : this.state.status} <Antd.Icon
                                                type="down"/>
                                            </Antd.Button>
                                        </Antd.Dropdown>
                                        <Antd.Input.Search className="home-search"
                                                           placeholder="输入酒店名"
                                                           enterButton/>
                                    </Antd.Col>
                                </Antd.Row>
                                <Antd.Row>
                                    <Antd.Col span={24}>
                                        <span>酒店列表</span>
                                    </Antd.Col>
                                </Antd.Row>
                                <Antd.Row>
                                    <Antd.Col span={24}>
                                        <ul className="home-list">
                                            <li className="active">
                                                <div>
                                                    <Antd.Row>
                                                        <Antd.Col span={8}>
                                                            <Antd.Badge status="warning" text="待审核"/>
                                                        </Antd.Col>
                                                        <Antd.Col span={14} offset={2} className="my-text-right">
                                                            订单号: 1456797242442
                                                        </Antd.Col>
                                                    </Antd.Row>
                                                    <div className="home-list-position my-text-center">
                                                        <h3>Router 12849</h3>
                                                        <p>
                                                            <Antd.Icon type="environment-o"/>
                                                            <span>West Willard</span>
                                                        </p>
                                                    </div>
                                                </div>

                                            </li>
                                            <li className="active">
                                                <div>
                                                    <Antd.Row>
                                                        <Antd.Col span={8}>
                                                            <Antd.Badge status="success" text="待审核"/>
                                                        </Antd.Col>
                                                        <Antd.Col span={14} offset={2} className="my-text-right">
                                                            订单号: 1456797242442
                                                        </Antd.Col>
                                                    </Antd.Row>
                                                    <div className="home-list-position my-text-center">
                                                        <h3>Router 12849</h3>
                                                        <p>
                                                            <Antd.Icon type="environment-o"/>
                                                            <span>West Willard</span>
                                                        </p>
                                                    </div>
                                                </div>

                                            </li>
                                            <li className="active">
                                                <div>
                                                    <Antd.Row>
                                                        <Antd.Col span={8}>
                                                            <Antd.Badge status="warning" text="待审核"/>
                                                        </Antd.Col>
                                                        <Antd.Col span={14} offset={2} className="my-text-right">
                                                            订单号: 1456797242442
                                                        </Antd.Col>
                                                    </Antd.Row>
                                                    <div className="home-list-position my-text-center">
                                                        <h3>Router 12849</h3>
                                                        <p>
                                                            <Antd.Icon type="environment-o"/>
                                                            <span>West Willard</span>
                                                        </p>
                                                    </div>
                                                </div>

                                            </li>
                                            <li className="active">
                                                <div>
                                                    <Antd.Row>
                                                        <Antd.Col span={8}>
                                                            <Antd.Badge status="success" text="待审核"/>
                                                        </Antd.Col>
                                                        <Antd.Col span={14} offset={2} className="my-text-right">
                                                            订单号: 1456797242442
                                                        </Antd.Col>
                                                    </Antd.Row>
                                                    <div className="home-list-position my-text-center">
                                                        <h3>Router 12849</h3>
                                                        <p>
                                                            <Antd.Icon type="environment-o"/>
                                                            <span>West Willard</span>
                                                        </p>
                                                    </div>
                                                </div>

                                            </li>
                                            <li className="active">
                                                <div>
                                                    <Antd.Row>
                                                        <Antd.Col span={8}>
                                                            <Antd.Badge status="warning" text="待审核"/>
                                                        </Antd.Col>
                                                        <Antd.Col span={14} offset={2} className="my-text-right">
                                                            订单号: 1456797242442
                                                        </Antd.Col>
                                                    </Antd.Row>
                                                    <div className="home-list-position my-text-center">
                                                        <h3>Router 12849</h3>
                                                        <p>
                                                            <Antd.Icon type="environment-o"/>
                                                            <span>West Willard</span>
                                                        </p>
                                                    </div>
                                                </div>

                                            </li>
                                            <li className="active">
                                                <div>
                                                    <Antd.Row>
                                                        <Antd.Col span={8}>
                                                            <Antd.Badge status="success" text="待审核"/>
                                                        </Antd.Col>
                                                        <Antd.Col span={14} offset={2} className="my-text-right">
                                                            订单号: 1456797242442
                                                        </Antd.Col>
                                                    </Antd.Row>
                                                    <div className="home-list-position my-text-center">
                                                        <h3>Router 12849</h3>
                                                        <p>
                                                            <Antd.Icon type="environment-o"/>
                                                            <span>West Willard</span>
                                                        </p>
                                                    </div>
                                                </div>

                                            </li>
                                            <li className="active">
                                                <div>
                                                    <Antd.Row>
                                                        <Antd.Col span={8}>
                                                            <Antd.Badge status="success" text="待审核"/>
                                                        </Antd.Col>
                                                        <Antd.Col span={14} offset={2} className="my-text-right">
                                                            订单号: 1456797242442
                                                        </Antd.Col>
                                                    </Antd.Row>
                                                    <div className="home-list-position my-text-center">
                                                        <h3>Router 12849</h3>
                                                        <p>
                                                            <Antd.Icon type="environment-o"/>
                                                            <span>West Willard</span>
                                                        </p>
                                                    </div>
                                                </div>

                                            </li>
                                            <li className="active">
                                                <div>
                                                    <Antd.Row>
                                                        <Antd.Col span={8}>
                                                            <Antd.Badge status="warning" text="待审核"/>
                                                        </Antd.Col>
                                                        <Antd.Col span={14} offset={2} className="my-text-right">
                                                            订单号: 1456797242442
                                                        </Antd.Col>
                                                    </Antd.Row>
                                                    <div className="home-list-position my-text-center">
                                                        <h3>Router 12849</h3>
                                                        <p>
                                                            <Antd.Icon type="environment-o"/>
                                                            <span>West Willard</span>
                                                        </p>
                                                    </div>
                                                </div>

                                            </li>
                                            <li className="active">
                                                <div>
                                                    <Antd.Row>
                                                        <Antd.Col span={8}>
                                                            <Antd.Badge status="success" text="待审核"/>
                                                        </Antd.Col>
                                                        <Antd.Col span={14} offset={2} className="my-text-right">
                                                            订单号: 1456797242442
                                                        </Antd.Col>
                                                    </Antd.Row>
                                                    <div className="home-list-position my-text-center">
                                                        <h3>Router 12849</h3>
                                                        <p>
                                                            <Antd.Icon type="environment-o"/>
                                                            <span>West Willard</span>
                                                        </p>
                                                    </div>
                                                </div>

                                            </li>
                                            <li className="active">
                                                <div>
                                                    <Antd.Row>
                                                        <Antd.Col span={8}>
                                                            <Antd.Badge status="success" text="待审核"/>
                                                        </Antd.Col>
                                                        <Antd.Col span={14} offset={2} className="my-text-right">
                                                            订单号: 1456797242442
                                                        </Antd.Col>
                                                    </Antd.Row>
                                                    <div className="home-list-position my-text-center">
                                                        <h3>Router 12849</h3>
                                                        <p>
                                                            <Antd.Icon type="environment-o"/>
                                                            <span>West Willard</span>
                                                        </p>
                                                    </div>
                                                </div>

                                            </li>
                                            <li className="active">
                                                <div>
                                                    <Antd.Row>
                                                        <Antd.Col span={8}>
                                                            <Antd.Badge status="warning" text="待审核"/>
                                                        </Antd.Col>
                                                        <Antd.Col span={14} offset={2} className="my-text-right">
                                                            订单号: 1456797242442
                                                        </Antd.Col>
                                                    </Antd.Row>
                                                    <div className="home-list-position my-text-center">
                                                        <h3>Router 12849</h3>
                                                        <p>
                                                            <Antd.Icon type="environment-o"/>
                                                            <span>West Willard</span>
                                                        </p>
                                                    </div>
                                                </div>

                                            </li>
                                            <li className="active">
                                                <div>
                                                    <Antd.Row>
                                                        <Antd.Col span={8}>
                                                            <Antd.Badge status="success" text="待审核"/>
                                                        </Antd.Col>
                                                        <Antd.Col span={14} offset={2} className="my-text-right">
                                                            订单号: 1456797242442
                                                        </Antd.Col>
                                                    </Antd.Row>
                                                    <div className="home-list-position my-text-center">
                                                        <h3>Router 12849</h3>
                                                        <p>
                                                            <Antd.Icon type="environment-o"/>
                                                            <span>West Willard</span>
                                                        </p>
                                                    </div>
                                                </div>

                                            </li>
                                        </ul>
                                        <Antd.Pagination className="my-text-center" showSizeChanger
                                                         onShowSizeChange={this.onShowSizeChange.bind(this)}
                                                         defaultCurrent={3} total={500}/>
                                    </Antd.Col>
                                </Antd.Row>
                            </Antd.Col>
                        </Antd.Row>
                    </Antd.Col>
                </Antd.Row>
            </div>
        );
    };
}


export default ReactRouterDom.withRouter(Home);
